<template>
    <div class="indexContainer">
        <div class="btnsContainer">
            <div class="btn" @click="getMdValueFn">预览生成文件</div>
            <div class="btn" @click="saveFile">下载文章</div>
          <router-link to="/"  class="btn btn-default" >返回</router-link>

        </div>
        <div class="maskContainer" v-if="dilogStatus">
            <div class="contentContainer">
            <div class="closeBtnContainer" @click="closeMaskFn"></div>
                <textarea class="showAreaContainer" v-model="msgShow" readonly></textarea>
            </div>
        </div>
        <div class="editorContainer">
            <markdown
            :mdValuesP="msg.mdValue"
            :fullPageStatusP="false"
            :editStatusP="true"
            :previewStatusP="true"
            :navStatusP="true"
            :icoStatusP="true"
            @childevent="childEventHandler"
            ></markdown>
        </div>
    </div>
</template>

<script>
    import markdown from '../components/markdown'
    export default {
        name: 'index',
        data() {
            return {
                msgShow:'我要显示的内容',
                dilogStatus:false,
                msg: {
                    mdValue:'## Your Title'
                }
            }
        },
        components: {
            markdown
        },
        methods: {
            childEventHandler:function(res){
                // res会传回一个data,包含属性mdValue和htmlValue，具体含义请自行翻译
                this.msg=res;
            },
            //获取当前时间，格式YYYY-MM-DD
            getNowFormatDate:function () {
                var date = new Date();
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = year + seperator1 + month + seperator1 + strDate;
                return currentdate;
            },
            getMdValueFn:function(){
                this.msgShow="---\n" +
                "layout:     post\n" +
                "title:      \""+this.$route.query.title+"\"\n" +
                "subtitle:   \" "+this.$route.query.subtitle+"\"\n" +
                "date:       "+this.getNowFormatDate()+" 12:00:00\n" +
                "author:     \""+this.$route.query.author+"\"\n" +
                "header-img: \"img/"+this.$route.query.bg+".jpg\"\n" +
                "catalog: true\n" +
                "tags:\n" ;
                var tags=this.$route.query.tags.split(',');
                for ( var i=0;i<tags.length;i++ ){
                    this.msgShow+="    - "+tags[i]+"\n";
                }
                this.msgShow+="---\n"+ this.msg.mdValue;
                this.dilogStatus=true;
            },
            getHtmlValueFn:function(){
                this.msgShow=this.msg.htmlValue;
                this.dilogStatus=true;

            },
            closeMaskFn:function(){
                this.msgShow='';
                this.dilogStatus=false;
            },
            saveFile:function () {
                this.msgShow="---\n" +
                    "layout:     post\n" +
                    "title:      \""+this.$route.query.title+"\"\n" +
                    "subtitle:   \" "+this.$route.query.subtitle+"\"\n" +
                    "date:       "+this.getNowFormatDate()+" 12:00:00\n" +
                    "author:     \""+this.$route.query.author+"\"\n" +
                    "header-img: \"img/"+this.$route.query.bg+".jpg\"\n" +
                    "catalog: true\n" +
                    "tags:\n" ;
                var tags=this.$route.query.tags.split(',');
                for ( var i=0;i<tags.length;i++ ){
                    this.msgShow+="    - "+tags[i]+"\n";
                }
                this.msgShow+="---\n"+ this.msg.mdValue;
                var content =this.msgShow;
                var file = new File([content], this.getNowFormatDate()+"-name.markdown", { type: "text/plain;charset=utf-8" });
                saveAs(file);
            }

    }
    }
</script>

<style lang="scss" scoped>
    .show{
        position: absolute;
        left: 0;
        top: 0;
    }
    .indexContainer {
        width: 100%;
        height: 100%;
        background: #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .btnsContainer{
        position: absolute;
        z-index: 10;
        left: 65px;
        top: 5px;
        height: 25px;
        min-width: 300px;
        // background: pink;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .btn{
            display: inline-block;
            border:1px solid #ccc;
            margin-right: 10px;
            box-sizing: border-box;
            padding: 0 10px;
            background: #fff;
            font-size: 12px;
            height: 25px;
            line-height: 25px;
            cursor:pointer;
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select:none;
            -khtml-user-select:none; /* you could also put this in a class */
            -webkit-user-select:none;/* and add the CSS class here instead */
            -ms-user-select:none;
            user-select:none;/**禁止选中文字*/
            &:active{
                opacity: 0.8;
                background: lightblue;
            }
        }
    }
    .maskContainer{
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        height: 100vh;
        width: 100vw;
        background: rgba(0,0,0,0.5);
        // z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        .contentContainer{
            width: 60%;
            height: 60%;
            background: #fefefe;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
            .showAreaContainer{
                height: 100%;
                width: 100%;
                outline: none;
                background: #eee;
                display: block;
                resize: none;
                padding: 10px;
                box-sizing: border-box;
            }
            .closeBtnContainer{
                position: absolute;
                height: 30px;
                width: 30px;
                right: -40px;
                top: -40px;
                border:1px solid #fff;
                border-radius: 50%;
                &::before{
                    content: '';
                    position: absolute;
                    width: 70%;
                    height: 2px;
                    display: block;
                    background: #fff;
                    left: 15%;
                    top: calc(50% - 1px);
                    transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                    -moz-transform: rotate(45deg);
                }
                &::after{
                    content: '';
                    position: absolute;
                    width: 70%;
                    height: 2px;
                    display: block;
                    background: #fff;
                    left: 15%;
                    top: calc(50% - 1px);
                    transform: rotate(-45deg);
                    -webkit-transform: rotate(-45deg);
                    -moz-transform: rotate(-45deg);
                }
            }

        }

    }

    .editorContainer {
        width: 90%;
        height: 90%;
        border: 1px solid #ddd;
    }
</style>
